<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector(".box");

    // 赋值式：没有兼容
    // 绑定：只能绑定一次，无法重复绑定
    // box.onclick = function(){
    //     console.log(1);
    // }
    // box.onclick = function(){
    //     console.log(2);
    // }
    // 删除：利用重复赋值会覆盖的原理，删除事件
    // box.onclick = null;


    function fn1(){
        console.log(1);
    }
    function fn2(){
        console.log(2);
    }

    // 监听式，事件监听：有兼容
    // 绑定：可以重复绑定
    // box.addEventListener("click", fn1);
    // box.addEventListener("click", fn2);
    // 删除：删除的是绑定时的事件处理函数，不是事件
    // box.removeEventListener("click", fn1);
    // 以上正常浏览器
    // 以下IE低版本浏览器
    // 绑定
    // box.attachEvent("onclick", fn1);
    // box.attachEvent("onclick", fn2);
    // 删除
    // box.detachEvent("onclick", fn1);

    // console.log(box.attachEvent)

    addEvent(box, "click", function(){
        console.log("hello");
    })
    addEvent(box, "click", fn1);
    addEvent(box, "click", fn2);

    removeEvent(box, "click", fn1);
    removeEvent(box, "click", fn2);

    // 事件监听式绑定事件的兼容封装
    function addEvent(ele, type, cb){
        if(ele.attachEvent){
            ele.attachEvent("on"+type, cb);
        }else{
            ele.addEventListener(type, cb);
        }
    }
    // 事件监听式删除事件的兼容封装
    function removeEvent(ele, type, cb){
        if(ele.detachEvent){
            ele.detachEvent("on" + type, cb);
        }else{
            ele.removeEventListener(type, cb);
        }
    }



</script>
</html>